<template>
  <steve-editor
    v-model:value="editorData"
    :lang="editorLang"
    :height="editorHeight"
    :dark="editorDark"
    :font-size="editorFontSize"
    :wrap="editorWrap"
    :readonly="editorReadonly"
    :placeholder="editorPlaceholder"
    :search-panel="editorOpenSearchPanel"
    :scroll-to="editorScrollTo"
    @change="onChange"
    @ready="onReady"
  />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import SteveEditor from '@/components/steveEditor/index.vue';
import { compressJSON, formatJSON, getUrlParams } from '@/utils/common';
import beautify from 'js-beautify';
import { localCache } from '@/utils/cache';
import cacheKey from '@/config/cacheKey';
import { Base64 } from 'js-base64';

const editorHeight = ref('100vh'); // 编辑器的高度
const editorDark = ref(false); // 编辑器的主题
const editorData = ref(''); // 编辑器内容
const editorLang = ref('string'); // 编辑器语言 javascript、json、html
const editorFontSize = ref(16); // 编辑器字体大小
const editorWrap = ref(true); // 编辑器是否换行
const editorPlaceholder = ref(''); // 占位字符串
const editorReadonly = ref(false); // 设置只读
const editorOpenSearchPanel = ref(false); // 打开搜索面板
const background = ref('transparent'); // 背景颜色
const editorScrollTo = ref(); // 滚动至xx位置

const editView = ref();
const onReady = (view: any) => {
  editView.value = view;
};
const onChange = (v: any, view: any) => {
  editView.value = view;
};

onMounted(() => {
  // 获取url参数
  const urlParams = getUrlParams();
  if (urlParams['bg']) {
    background.value = urlParams['bg'];
    document.body.style.backgroundColor = background.value !== 'transparent' ? `#${background.value}` : 'transparent';
  }

  // 开放方法
  const openFunction = {
    /**
     * 设置背景色
     *
     * @param hax 16进制不带#
     */
    setBackground(hax: string) {
      background.value = hax;
      document.body.style.backgroundColor = hax !== 'transparent' ? `#${hax}` : 'transparent';
    },
    /**
     * 设置编辑器暗黑模式
     *
     * @param dark boolean true、false
     */
    setEditorDark(dark: boolean) {
      editorDark.value = dark;
      if (dark) {
        document.body.classList.add('dark');
      } else {
        document.body.classList.remove('dark');
      }
    },
    /**
     * 设置编辑器占位信息
     *
     * @param placeholder
     * @param type string  数据类型，base64/default
     */
    setEditorPlaceholder(placeholder: string, type: string) {
      if (type == 'base64') {
        placeholder = decodeURIComponent(Base64.decode(placeholder));
      }
      editorPlaceholder.value = placeholder;
    },
    /**
     * 设置编辑器语言
     *
     * @param lang string javascript、json、html
     */
    setEditorLang(lang: string) {
      editorLang.value = lang;
    },
    /**
     * 获取编辑器语言
     */
    getEditorLang() {
      return editorLang.value;
    },
    /**
     * 设置编辑器字体大小
     *
     * @param size number
     */
    setEditorFontSize(size: number) {
      editorFontSize.value = size;
    },
    /**
     * 设置编辑器是否换行
     *
     * @param bool
     */
    setEditorWrap(bool: boolean) {
      editorWrap.value = bool;
    },
    /**
     * 设置编辑器只读
     *
     * @param bool
     */
    setEditorReadonly(bool: boolean) {
      editorReadonly.value = bool;
    },
    /**
     * 打开搜索面板
     *
     * @param bool
     */
    openEditorSearchPanel(bool: boolean) {
      editorOpenSearchPanel.value = bool;
    },
    /**
     * 设置编辑器内容
     *
     * @param data string
     * @param type string  数据类型，base64/default
     */
    setEditorData(data: string, type: string) {
      if (type == 'base64') {
        data = decodeURIComponent(Base64.decode(data));
      }
      editorData.value = data;
    },
    /**
     * 滚动到xx位置
     *
     * @param position start/end/10
     */
    scrollTo(position: any) {
      editorScrollTo.value = position;
    },
    /**
     * 格式化数据
     */
    formatEditorData() {
      if (editorLang.value === 'json') {
        editorData.value = formatJSON(editorData.value);
      } else if (editorLang.value === 'html') {
        editorData.value = beautify.html(editorData.value);
      } else if (editorLang.value === 'javascript') {
        editorData.value = beautify.js(editorData.value);
      }
    },
    /**
     * 压缩数据
     */
    compressEditorData() {
      if (editorLang.value === 'json') {
        editorData.value = compressJSON(editorData.value);
      } else if (editorLang.value === 'html') {
      } else if (editorLang.value === 'javascript') {
      }
      return editorLang.value;
    },
    /**
     * 获取数据
     */
    getEditorData() {
      return editorData.value;
    },
    /**
     * 获取行数
     */
    getLine() {
      return editView.value.state.doc.lines;
    },
    /**
     * 设置自动提示代码
     *
     * @param lang
     * @param code
     */
    setEditorAutoCode(lang: string, code: string) {
      const key = `${cacheKey.AUTO_CODE}_${lang}`;
      let codes = localCache.getCache(key);
      const codeJson = JSON.parse(code);
      if (codes && codes.length > 0) {
        let bool = false;
        for (let item of codes) {
          if (item.label === codeJson.label) {
            item = codeJson;
            bool = true;
            break;
          }
        }

        if (!bool) {
          codes.push(codeJson);
        }
      } else {
        codes = [codeJson];
      }
      localCache.setCache(key, codes);
      return codes;
    },
    /**
     * 删除自动提示代码
     *
     * @param lang
     * @param label
     */
    removeEditorAutoCode(lang: string, label: string) {
      const key = `${cacheKey.AUTO_CODE}_${lang}`;
      let codes = localCache.getCache(key);
      if (codes && codes.length > 0) {
        for (let i = 0; i < codes.length; i++) {
          if (codes[i].label === label) {
            codes.splice(i, 1);
          }
        }
      }
      localCache.setCache(key, codes);
      return codes;
    }
  };
  (window as any).JiEasy = openFunction;
  (window as any).Editor = openFunction;
});
</script>

